export function render() {
    return `
        <div class="email-register-container">
            <!-- 消息提示组件 -->
            <sl-alert id="messageAlert" variant="primary" closable>
                <sl-icon slot="icon" name="info-circle"></sl-icon>
                <span id="messageText"></span>
            </sl-alert>
            
            <div class="register-modal" id="registerModal">
                <div class="register-form-container">
                    <!-- 关闭按钮 -->
                    <sl-icon-button 
                        name="x-lg" 
                        class="close-btn" 
                        id="closeBtn"
                        label="关闭">
                    </sl-icon-button>

                    <!-- 注册表单头部 -->
                    <div class="register-header">
                        <h2 class="register-title">注册</h2>
                        <p class="register-subtitle">请注册您的邮箱</p>
                    </div>

                    <!-- 注册表单 -->
                    <form class="register-form" id="registerForm">
                        <div class="form-group">
                            <label class="form-label" for="email">邮箱地址</label>
                            <sl-input
                                id="registerEmail"
                                name="email"
                                type="email"
                                placeholder="请输入您的邮箱地址"
                                class="register-input"
                                required>
                                <sl-icon name="envelope" slot="prefix"></sl-icon>
                            </sl-input>
                            <div class="error-message" id="registerEmailError"></div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="registerVerificationCode">验证码</label>
                            <div class="verification-code-group">
                                <sl-input
                                    id="registerVerificationCode"
                                    name="verificationCode"
                                    type="text"
                                    placeholder="请输入验证码"
                                    class="register-input"
                                    required>
                                    <sl-icon name="shield-check" slot="prefix"></sl-icon>
                                </sl-input>
                                <sl-button 
                                    id="sendCodeBtn"
                                    variant="outline"
                                    size="medium">
                                    发送验证码
                                </sl-button>
                            </div>
                            <div class="error-message" id="registerVerificationCodeError"></div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="registerPassword">密码</label>
                            <sl-input
                                id="registerPassword"
                                name="password"
                                type="password"
                                placeholder="请输入您的密码"
                                class="register-input"
                                required
                                password-toggle>
                                <sl-icon name="lock" slot="prefix"></sl-icon>
                            </sl-input>
                            <div class="error-message" id="registerPasswordError"></div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="registerConfirmPassword">确认密码</label>
                            <sl-input
                                id="registerConfirmPassword"
                                name="confirmPassword"
                                type="password"
                                placeholder="请再次输入您的密码"
                                class="register-input"
                                required
                                password-toggle>
                                <sl-icon name="lock" slot="prefix"></sl-icon>
                            </sl-input>
                            <div class="error-message" id="registerConfirmPasswordError"></div>
                        </div>

                        <div class="form-actions">
                            <sl-button 
                                type="submit" 
                                variant="primary" 
                                size="medium" 
                                class="register-btn"
                                id="registerBtn">
                                <sl-icon name="person-plus" slot="prefix"></sl-icon>
                                注册
                            </sl-button>
                        </div>
                    </form>

                    <!-- 登录链接 -->
                    <div class="login-link">
                        <span>已有账号？</span>
                        <a href="#" id="loginLink" class="link">立即登录</a>
                    </div>
                </div>
            </div>
        </div>
    `;
}